<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title>优购优品网</title>
		<!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>

		<style>
			/* .content {
            background: #efefef;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        } */

			.row {
				position: relative;
				margin-bottom: 10px;
			}

			.row .img {
				width: 100px;
				height: 80px;
				border-radius: 4px;
				overflow: hidden;
				/* padding: 0 10px; */
			}

			.row .img img {
				width: 100%;
				height: 100%;
			}

			.row .desc {
				padding-right: 5px;
				padding-left: 10px;
			}

			.row .desc .title {
				font-size: 14px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.row .desc .title .hot {
				color: #fff;
				background: #cd1b21;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 5px;
				vertical-align: middle;
			}

			.row .desc .sub-title {
				font-size: 12px;
				color: #969799;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.row .desc .sub-title * {
				vertical-align: middle;
			}

			.sku {
				padding: 3px 0;
				font-size: 13px;
				color: #9e9e9e;
			}

			.price {
				text-align: right;
				font-size: 14px;
				line-height: initial;
			}

			.van-search {
				background: transparent !important;
				padding: 0;
			}

			.van-nav-bar__title {
				margin: 0 10px 0 50px;
				max-width: none;
			}

			.van-nav-bar__left {
				height: 46px;
			}

			.van-dropdown-menu {
				height: 40px;
			}



			.pd {
				padding: 5px 10px 5px 10px;
			}

			.pd>div {
				overflow: hidden;
				border-radius: 8px;
			}

			.f-r {
				text-align: right;
				color: #9e9e9e;
				font-size: 13px;
			}

			.button {
				text-align: right;
				padding: 5px 0;
			}

			.button button {
				margin-left: 10px;
			}

			.code {
				font-weight: 700;
				font-size: 15px;
				padding-bottom: 8px;
			}

			.close {
				float: right;
				color: #ff976a;
				font-size: 13px;
				font-weight: 500;
			}

			.van-button--small {
				height: 26px;
			}

			.tab {
				overflow: hidden;
				position: relative;
			}

			.tab>div {
				width: 20%;
				float: left;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 13px;
			}

			.tab .on {
				border-bottom: 3px solid #cd1b21;
				color: #cd1b21;
			}

			.red .van-action-sheet__subname {
				color: #cd1b21;
			}

			.com {
				padding: 5px 0 5px 0;
				text-align: center;
				font-size: 13px;
				color: #cd1b21;
				margin: 0 15px;
				border-top: 1px solid rgba(235, 237, 240, 0.6);
			}

			.com>* {
				vertical-align: middle;
			}
		</style>


	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head head-index" left-arrow @click-left="onClickLeft">
					<div slot="title" style="margin-top: 10px;">
						<form action="" style="margin-top:-3px;">
							<van-search placeholder="搜索我的订单" v-model="filter.searchKey" shape="round" @search="getList">
							</van-search>
						</form>
					</div>
				</van-nav-bar>
				<div class="body-no-bottom">
					<div class="content">
						<div class="tab">
							<div @click="toggleStatus(0)" :class="filter.orderStatus == 0?'on':''">全部</div>
							<div @click="toggleStatus(1)" :class="filter.orderStatus == 1?'on':''">待付款</div>
							<div @click="toggleStatus(2)" :class="filter.orderStatus == 2?'on':''">待发货</div>
							<div @click="toggleStatus(3)" :class="filter.orderStatus == 3?'on':''">待收货</div>
							<div @click="toggleStatus(21)" :class="filter.orderStatus == 21?'on':''">待评价</div>
						</div>
						<div style="height:calc(100% - 40px);overflow: auto;">
							<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
								@load="listOnLoad">

								<div class="pd" v-for="row in orderList" @click="intoDetail(row)"
									v-if="row.node && row.node.length">
									<van-cell>
										<div class="code">单号：{{row.OrderId}}
											<span class="close" v-if="row.OrderStatus == 1">等待买家付款</span>
											<span class="close" v-else-if="row.OrderStatus == 2">买家已付款</span>
											<span class="close" v-else-if="row.OrderStatus == 3">仓库已发货</span>
											<span class="close"
												v-else-if="row.OrderStatus == 4 && row.CloseReason != '订单已退款完成'">交易关闭</span>
											<span class="close"
												v-else-if="row.OrderStatus == 4 && row.CloseReason == '订单已退款完成'">退款成功</span>
											<span class="close" v-else-if="row.OrderStatus == 5">交易成功</span>
											<span class="close" v-else-if="row.OrderStatus == 6">退款申请中</span>
											<span class="close" v-else-if="row.OrderStatus == 18">退款失败</span>
										</div>
										<div class="row flex-box" v-for="(item,itemIndex) in row.node"
											v-show="!row.isCom?itemIndex < 6 :true">
											<div class="img">
												<img v-lazy="shoppingMallServerIP + item.ThumbnailsUrl" />
											</div>
											<div class="flex-main desc">
												<div class="title">{{item.ProductName}}</div>
												<div class="sku">{{item.SKU}}</div>
											</div>
											<div class="price">
												<div>￥&nbsp;<span style="font-size: 15px;">{{item.ItemListPrice}}</span>
												</div>
												<div style="color:#9e9e9e">x{{item.ShipmentQuantity}}</div>
											</div>
										</div>
										<div class="com" v-show="!row.isCom && row.node.length >= 5"
											@click.stop="showComplete(row)">
											<span>显示所有商品&nbsp;</span>
											<van-icon name="arrow-down"></van-icon>
										</div>
										<div class="f-r">共{{row.node.length}}件商品&nbsp;&nbsp;合计：￥&nbsp;
											<span style="font-size: 16px;">{{row.OrderTotal}}</span>&nbsp;
											<span v-if="row.Freight">（含运费￥&nbsp;{{row.Freight}}）</span>
										</div>
										<div class="button">
											<van-button type="default" round size="small" v-if="row.OrderStatus == 1"
												@click.stop="closeOrder(row)">取消订单</van-button>
											<van-button type="warning" round size="small" :loading="ifConfirm"
												v-if="row.OrderStatus == 1" @click.stop="payOrder(row)">付款
											</van-button>
											<van-button type="default" round size="small" v-if="row.OrderStatus == 3"
												@click.stop="openLogistics(row)">查看物流
											</van-button>
											<van-button type="warning" round size="small" v-if="row.OrderStatus == 3"
												@click.stop="confirmReceipt(row)">确认收货
											</van-button>
											<van-button type="warning" round size="small" :loading="ifConfirm"
												v-if="row.OrderStatus == 5 && row.isReview <= 0 "
												@click.stop="evaluateOrder(row)">评价
											</van-button>
										</div>
									</van-cell>
								</div>

								<div v-show="!orderList.length"
									style="font-size: 14px;color:#9e9e9e;text-align:center;padding: 20px 0;">暂无订单</div>
							</van-list>
						</div>

					</div>
					<van-loading v-if="showLoading" />
				</div>
			</div>
			<van-action-sheet v-model="showPageType" :actions="pageTypes" description="支付方式选择"
				@cancel="showPageType = false;" @select="payMoney"></van-action-sheet>
		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();
		var OrderNo = '';

		// var type = api.pageParam.type;

		// var aliPayPlus = api.require('aliPayPlus');
		// var wxPay = api.require('wxPay');


		Vue.use(vant.Lazyload, {
			loading: '../image/no.png',
			error: '../image/no.png'
		});

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				ifConfirm: false,
				showPageType: false,
				serverIP: 'http://' + FLD.serverIP,
				pageTypes: [{
					name: '支付宝'
				}, {
					name: '微信'
				}, {
					name: '余额支付',
					subname: '',
					className: ''
				}],
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				listLoading: false,
				listFinished: true,
				filter: {
					orderStatus: '',
					pageIndex: 1,
					pageSize: 20,
					searchKey: ''
				},
				orderList: []
			},
			created: function() {
				var that = this;

				// 判断是从哪里进入订单页面的，如果是详情回退过来的，调用一下方法；因为调用获取列表的方法写在外层vue中
				if (window.localStorage.getItem('orderIndex')) {
					that.GetOrderIndex(window.localStorage.getItem('orderIndex'))
				}

				var appTop = parseInt(window.localStorage.getItem('safeAreaTop'));

				if (appTop) {
					$('.head-index').css({
						'padding-top': appTop + 'px',
						'height': appTop + 50 + 'px',
						'line-height': '40px'
					})
				}
			},
			mounted() {},
			beforeDestory() {
				window.localStorage.removeItem('orderIndex');
				console.log(window.localStorage.getItem('orderIndex'));
			},
			methods: {
				GetOrderIndex(data) {
					var that = this;
					// console.log(data)
					this.filter.orderStatus = data;
					that.getList();
				},
				showComplete(row) {
					var that = this;
					if (typeof row.checked === 'undefined') {
						that.$set(row, 'isCom', true);
					} else {
						row.isCom = true;

					}
				},
				toggleStatus(index) {
					var that = this;
					that.filter.orderStatus = index;
					that.getList();
				},
				getList() {
					var that = this;
					that.showLoading = true;
					that.filter.pageIndex = 1;
					// console.log(JSON.stringify(that.filter))
					FLD.ajax('sp_getOrderList', that.filter, function(res) {
						that.showLoading = false;
						that.orderList = res.ds;
						that.listFinished = false;
						var ids = [];
						for (var i in res.ds) {
							ids.push('\'' + res.ds[i].OrderId + '\'');
						}
						that.getProducts(ids, that.filter.pageIndex);
					})
				},
				listOnLoad(row) {
					var that = this;
					that.filter.pageIndex++;
					FLD.ajax('sp_getOrderList', that.filter, function(res) {
						that.listLoading = false;
						if (res.ds.length == 0) {
							that.listFinished = true;
						}
						that.orderList = that.orderList.concat(res.ds);
						var ids = [];
						for (var i in res.ds) {
							ids.push('\'' + res.ds[i].OrderId + '\'');
						}
						that.getProducts(ids, that.filter.pageIndex);
					})
				},
				getProducts(ids, pageIndex) {
					var that = this;
					if (!ids.length) return;
					FLD.ajax('sp_GetOrderItemByOrderIds', {
						orderIds: ids.join()
					}, function(res) {
						var n = (pageIndex - 1) * that.filter.pageSize;
						for (var i = n; i < n + that.filter.pageSize; i++) {
							if (that.orderList[i]) {
								that.$set(that.orderList[i], 'node', [])
								for (var j in res.ds) {
									if (that.orderList[i].OrderId == res.ds[j].OrderId) {
										that.orderList[i].node.push(res.ds[j])
									}
								}
							}


						}
					})
				},
				closeOrder(row) {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否取消该订单?'
					}).then(() => {
						FLD.ajax('sp_closeOrder', {
							orderId: row.OrderId
						}, function(res) {
							layer.open({
								content: '订单取消成功!',
								skin: 'msg',
								time: 2
							});
							row.OrderStatus = 4;
							api.sendEvent({
								name: 'refreshAboutUser'
							});
						})
					}).catch(() => {

					});
				},
				intoDetail(row) {
					var that = this;

					window.location.href = 'orderDetail.html';
					window.localStorage.setItem('OrderId', row.OrderId);
					window.localStorage.setItem('orderIndex', vm.filter.orderStatus);
					// api.openWin({
					// 	name: 'orderDetail',
					// 	url: 'orderDetail.html',
					// 	reload: true,
					// 	slidBackEnabled: false,
					// 	pageParam: {
					// 		OrderId: row.OrderId
					// 	}
					// })
				},
				payOrder(row) {
					var that = this;
					that.showLoading = true;

					// if (row.PaymentTypeId == 0) {
					FLD.ajax('sp_getMemberInfo', {}, function(res) {
						that.showLoading = false;
						window.localStorage.setItem('userInfo', JSON.stringify(res.ds[0]));
						that.pageTypes[2].subname = '当前余额￥' + FLD.getUserInfo().Balance;
						that.pageTypes[2].className = (FLD.getUserInfo().Balance + FLD.getUserInfo()
							.Quota - row.OrderTotal) < 0 ? 'red' : '';
						that.showPageType = true;
						OrderNo = row.OrderId;
					})
					// } else {
					//     //线下支付付款结束全流程
					// }




				},
				evaluateOrder(row) {
					var that = this;
					var node = row.node;
					api.openWin({
						name: 'evaluateOrder',
						url: 'evaluateOrder.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							goodsEvaluated: node
						}
					})
				},
				openLogistics(row) {
					var that = this;
					api.openWin({
						name: 'logistics',
						url: 'logistics.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							OrderId: row.OrderId
						}
					})
				},
				payMoney(item, index) {
					var that = this;
					that.showPageType = false;
					if (index == 0) {

						var obj = {
							orderNo: OrderNo,
							PayType: 1
						}
						FLD.nativeRequest_shopPay('pay', obj, function(res) {
							aliPayPlus.payOrder({
								orderInfo: res
							}, function(ret, err) {
								OrderNo = '';
								that.getList();
								api.sendEvent({
									name: 'refreshAboutUser'
								});
							});
						})
					} else if (index == 1) {
						var obj = {
							orderNo: OrderNo,
							PayType: 2
						}
						FLD.nativeRequest_shopPay('pay', obj, function(res) {

							var data = JSON.parse(res);
							var myDate = new Date();
							var now = Date.parse(new Date()) / 1000;

							var stringA = 'appid=' + data.appid + '&noncestr=' + data.nonce_str +
								'&package=Sign=WXPay' + '&partnerid=' + data.mch_id + '&prepayid=' +
								data.prepay_id + '&timestamp=' + now +
								'&key=fldabcdefg123456789erfgiht56jh9f';
							var signature = api.require('signature');
							signature.md5({
								data: stringA
							}, function(ret, err) {
								if (ret.status) {
									var sign = ret.value.toUpperCase();
									wxPay.payOrder({
										apiKey: data.appid,
										orderId: data.prepay_id,
										mchId: data.mch_id,
										nonceStr: data.nonce_str,
										timeStamp: now,
										package: 'Sign=WXPay',
										sign: sign
									}, function(ret, err) {
										OrderNo = '';
										that.getList();
										api.sendEvent({
											name: 'refreshAboutUser'
										});
									});

								}
							});


						})
					} else {
						if (that.pageTypes[2].className) {
							api.openWin({
								name: 'rechargeBalance',
								url: 'rechargeBalance.html',
								reload: true,
								slidBackEnabled: false
							})
						} else {
							var obj = {
								orderId: OrderNo
							}
							FLD.ajax('sp_balanceOrderPayFinish', obj, function(res) {
								if (res.ds && res.ds[0] && res.ds[0].status == 500) {
									layer.open({
										content: res.ds[0].msg,
										skin: 'msg',
										time: 2
									});
								} else {
									layer.open({
										content: '付款成功',
										skin: 'msg',
										time: 2
									});
									OrderNo = '';
									that.getList();
									api.sendEvent({
										name: 'refreshAboutUser'
									});
								}
							})
						}
					}
				},
				confirmReceipt(row) {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否确认收货?'
					}).then(() => {
						FLD.ajax('sp_submitOrder', {
							orderId: row.OrderId
						}, function(res) {
							layer.open({
								content: '商品确认收货成功!',
								skin: 'msg',
								time: 2
							});
							row.OrderStatus = 5;
							that.getList();
							api.sendEvent({
								name: 'refreshAboutUser'
							});
						})
					}).catch(() => {

					});
				},
				onClickLeft() {
					window.localStorage.removeItem('orderIndex');

					uni.navigateBack()
				}
			}
		})
	</script>

</html>